<%--
  Created by IntelliJ IDEA.
  User: dqf
  Date: 2015/3/2
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<div class="row">
    <!-- NEW WIDGET START -->
    <article class="col-sm-12 col-md-12 col-lg-12">
        <div class="jarviswidget well" id="wid-id-3"
             data-widget-colorbutton="false"
             data-widget-editbutton="false"
             data-widget-togglebutton="false"
             data-widget-deletebutton="false"
             data-widget-fullscreenbutton="false"
             data-widget-custombutton="false"
             data-widget-sortable="false">
            <!-- widget div-->
            <div>
                <div class="widget-body">
                    <a class="btn btn-default" id="btn-re-common" href="javascript:void(0)">
                        <i class="fa fa-lg fa-mail-reply-all"></i>项目信息
                    </a>
                    <a class="btn btn-default pull-right pull-right-fix" id="btn-save-common" href="javascript:void(0);"><i class="fa fa-lg fa-download"></i> 保存</a>
                    <hr class="simple">

                    <form id="proInfo" class="smart-form" novalidate="novalidate" action="" method="post">
                        <input type="hidden" name="keyId" id="keyId" value="<s:property value="proInfo.id" />"/>

                        <header id="title" style="display: block;">
                            项目基本信息
                        </header>
                        <fieldset>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    项目名称
                                </label>
                                <section class="col col-5">
                                    <label class="input">
                                        <input type="text" name="name" id="name" placeholder="请输入项目名称" value="<s:property value="proInfo.name"/>" >
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    项目类别
                                </label>
                                <section class="col col-5">
                                    <label class="input">
                                        <select class="form-control" name="dictId">
                                            <option value="">请选择</option>
                                            <s:iterator value="typesArrayList" id="list">
                                                <option  value="<s:property value="#list.id"/>" <s:property value="#list.selected"/> ><s:property value="#list.name"/></option>
                                            </s:iterator>
                                        </select>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    <a  href="javascript:void(0);" key="btn-choose-client"> 客户名称</a>
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled type="text" id="clientName"
                                               value="<s:property value="proInfo.client.name"/>"/>
                                        <input type="hidden" id="clientId" name="clientId"
                                               value="<s:property value="proInfo.client.id"/>"/>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    <a  href="javascript:void(0);" key="btn-choose-linkman"> 联系人</a>
                                </label>
                                <section class="col col-5">
                                    <label class="input">
                                        <label class="input state-disabled">
                                            <input disabled type="text" id="linkmanName"
                                                   value="<s:property value="proInfo.linkman.name"/>"/>
                                            <input type="hidden" id="linkmanId" name="linkmanId"
                                                   value="<s:property value="proInfo.linkman.id"/>"/>
                                        </label>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    手机
                                </label>
                                <section class="col col-5">
                                    <label class="input">
                                        <input disabled type="text" id="linkmanMobile"
                                               value="<s:property value="proInfo.linkman.mobile"/>"/>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    所在地区
                                </label>
                                <div class="col col-7" style="margin-bottom: 15px">
                                    <a class="btn btn-success btn-sm" id="areaselect_text" href="javascript:void(0);">请选择城市</a>
                                    <span id="areaselect_span">
                                        <input name="province" id="province" type="text" placeholder="省份" value="<s:property value="proInfo.province"/>"/>
                                        <input name="city" id="city" type="text" placeholder="城市" value="<s:property value="proInfo.city"/>"/>
                                        <input name="county" id="county" type="text" placeholder="县级" value="<s:property value="proInfo.county"/>"/>
                                        <a class="btn btn-success btn-sm" id="areaselect_check" href="javascript:void(0);"><i class="fa fa-check"></i> </a>
                                        <a class="btn btn-warning btn-sm" id="areaselect_cancel" href="javascript:void(0);"><i class="fa fa-ban"></i> </a>
									 </span>
                                </div>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    项目地址
                                </label>
                                <section class="col col-3">
                                    <label class="input" style="padding-left: 0">
                                        <input type="text" name="address" id="address" placeholder="项目地址" value="<s:property value="proInfo.address"/>">
                                        <input type="hidden" name="locationId" id="locationId" value="<s:property value="proInfo.locationId" />"/>
                                    </label>

                                </section>
                                <section class="col col-2">
                                    <a id="ajax_local_search" class="btn btn-primary" href="javascript:void(0);">验证地址有效性</a>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    <a  href="javascript:void(0);" key="btn-choose-chief"> 项目总监</a>
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled type="text" id="chiefName"
                                               value="<s:property value="proInfo.chief.name"/>"/>
                                        <input type="hidden" id="chiefId" name="chiefId"
                                               value="<s:property value="proInfo.chief.id"/>"/>
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">
                                    <a  href="javascript:void(0);" key="btn-choose-group"> 项目组成员</a>
                                </label>
                                <section class="col col-5">
                                    <label class="input state-disabled">
                                        <input disabled type="text" id="groupName"
                                               value="<s:iterator id="list" value="proInfo.group"><s:property value="#list.name"/>,</s:iterator>"/>
                                        <input type="hidden" id="groupId" name="groupId"
                                               value="<s:iterator id="list" value="proInfo.group"><s:property value="#list.id"/>,</s:iterator>"/>
                                    </label>
                                </section>
                            </div>

                            <div class="row">
                                <label class="label col col-2">
                                    <i class="fa fa-asterisk txt-color-red"></i>
                                    启动时间
                                </label>
                                <section class="col col-2">
                                    <label class="input">
                                        <i class="icon-append fa fa-calendar"></i>
                                        <input  class="hasDatepicker form-control" name="start" id="start" placeholder="请选择项目启动时间"
                                                type="text" value="<s:date name="proInfo.start" format="yyyy-MM-dd"/>">
                                    </label>
                                </section>
                            </div>
                            <div class="row">
                                <label class="label col col-2">完成时间</label>
                                <section class="col col-2">
                                    <label class="input">
                                        <i class="icon-append fa fa-calendar"></i>
                                        <input disabled class="hasDatepicker form-control" id="end"
                                                type="text" value="<s:date name="proInfo.end" format="yyyy-MM-dd"/>">
                                    </label>
                                </section>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </article>
</div>

<script>
    //选择客户对话框
    $("a[key='btn-choose-client']").unbind("click").bind("click",function(){
        ajax_action("ajax-dialog!clientDlg.action",{keyIds:$("div.widget-body #clientId").val()},{},function(pdata){
            oDialog.open({
                type :"radio",
                title:"请选择客户",
                data:pdata.data.data,
                callback:function(){
                    var obj =$("#group input:checked");
                    if(obj.size()!=1){
                        alert("请选择一位客户！");
                        return false;
                    }
                    var name = getArrProp(obj,"key");
                    var id = getArrProp(obj,"id");
                    $("div.widget-body #clientName").val(name);
                    $("div.widget-body #clientId").val(id);
                }
            });
        });
    });
    //选择对应客户的联系人
    $("a[key='btn-choose-linkman']").unbind("click").bind("click",function(){
        var clientId = $("#clientId").val();
        if(clientId.length<1){
            alert("请先选择客户！");
            return false;
        }
        ajax_action("ajax-dialog!linkmanDlg.action?clientId="+clientId,{keyIds:$("div.widget-body #linkmanId").val()},{},function(pdata){
            oDialog.open({
                type :"radio",
                title:"请选择联系人",
                data:pdata.data.data,
                callback:function(){
                    var obj =$("#group input:checked");
                    if(obj.size()!=1){
                        alert("请选择一位联系人！");
                        return false;
                    }
                    var key = getArrProp(obj,"key");
                    var arr = key.split("*");
                    var name = arr[0];
                    var mobile = arr[1];
                    var id = getArrProp(obj,"id");
                    $("div.widget-body #linkmanName").val(name);
                    $("div.widget-body #linkmanId").val(id);
                    $("div.widget-body #linkmanMobile").val(mobile);
                }
            });
        });
    });
    //选择项目总监
    $("a[key='btn-choose-chief']").unbind("click").bind("click",function(){
        ajax_action("ajax-dialog!usersDlg.action",{keyIds:$("div.widget-body #chiefId").val()},{},function(pdata){
            oDialog.open({
                type :"radio",
                title:"请选择项目总监",
                data:pdata.data.data,
                callback:function(){
                    var obj =$("#group input:checked");
                    if(obj.size()!=1){
                        alert("请选择一位项目总监！");
                        return false;
                    }
                    var name = getArrProp(obj,"key");
                    var id = getArrProp(obj,"id");
                    $("div.widget-body #chiefName").val(name);
                    $("div.widget-body #chiefId").val(id);
                }
            });
        });
    });
    //选择项目组成员
    $("a[key='btn-choose-group']").unbind("click").bind("click",function(){
        ajax_action("ajax-dialog!usersDlg.action",{keyIds:$("div.widget-body #groupId").val()},{},function(pdata){
            oDialog.open({
                title:"请选择项目组成员",
                data:pdata.data.data,
                callback:function(){
                    var obj =$("#group input:checked");
                    var name = getArrProp(obj,"key");
                    var id = getArrProp(obj,"id");
                    $("div.widget-body #groupName").val(name);
                    $("div.widget-body #groupId").val(id);
                }
            });
        });
    });
    //返回视图
    $("#btn-re-common").click(function(){
        loadURL("ajax-project!view.action",$('div#business_data'));
    });
    //校验
    $("#proInfo").validate({
        rules : {
            name : {
                required : true,
                remote:{
                    type:"POST",
                    url:"ajax-project!isUniqueByName.action",
                    data:{
                        keyId:$("#keyId").val(),
                        validatePro:"name",
                        newValue:function(){return $("#name").val();}
                    }
                }
            },
            dictId:{
                required : true
            },
            clientId:{
                required : true
            },
            linkmanId:{
                required : true
            },
            province:{
                required : true
            },
            chiefId:{
                required : true
            },
            start:{
                required : true
            }
        },
        messages : {
            name : {
                required : '请输入项目名称',
                remote:'项目名称已存在'
            },
            dictId : {
                required : '请选择正确的项目类别'
            },
            clientId : {
                required : '请选择客户'
            },
            linkmanId : {
                required : '请选择联系人'
            },
            province : {
                required : '请选择所在区域'
            },
            chiefId : {
                required : '请选择项目总监'
            },
            start : {
                required : '请选择项目启动时间'
            }
        },
        ignore: "",
        errorPlacement : function(error, element) {
            error.insertAfter(element.parent());
        }
    });

    $('.hasDatepicker').datetimepicker({
        format: 'yyyy-mm-dd',
        weekStart: 1,
        autoclose: true,
        todayBtn: 'linked',
        language: 'zh-CN',
        minView:2
    });

    //保存
    $("#btn-save-common").click(
            function(e) {
                $("#locationId").show();
                if ($("#locationId").val() == "") {
                    _show({state:400, title:"操作状态", message:"请先验证地址有效性!"});
                    return;
                }
                $("#locationId").hide();
                $("#areaselect_span").show();
                if(!$("#proInfo").valid()){
                    $("#areaselect_span").hide();
                    return false;
                }
                $.SmartMessageBox({
                    title : "提示：",
                    content : "确定提交吗？",
                    buttons : '[取消][确认]'
                }, function(ButtonPressed) {
                    if (ButtonPressed === "取消") {
                        e.preventDefault();
                        e.stopPropagation();
                        return;
                    }
                    if (ButtonPressed === "确认") {
                        $("#btn-save-common").attr("disabled", "disabled");
                        form_save("proInfo","<%=path%>/com/ajax-project!save.action");
                        loadURL("ajax-project!view.action",$('div#business_data'));
                    }
                });
            }
    );
</script>
<!--javascript 百度地图查找附件地址-->
<script type="text/javascript">
    $("#ajax_local_search").off("click").on("click",function(e){
        if($("#address").val()==""){
            return false;
        }
        var data = {
            city:$("#province").val(),
            address:$("#address").val()
        }
        ajax_action("ajax-project!locate.action",data,null,function(pdata){
            if(pdata.result.errorCode == 200){
                $("#ajax_local_search").html("检索成功");
                $("#locationId").val(pdata.data.localId);
                $("#address").val(pdata.data.address);
                $("#ajax_local_search").removeClass().addClass("btn btn-success");
            }else{
                $("#ajax_local_search").html("检索失败");
                $("#ajax_local_search").removeClass().addClass("btn btn-primary");
            }


        });
    })
</script>
<script type="text/javascript">
    function loadCard(){
        area_save($("#province").val(),$("#city").val(),$("#county").val());
        $("a#areaselect_text").show();
    }
    loadCard();
    loadScript("../resource/com/js/data.js", loadSelect);
    function loadSelect(){
        loadScript("../resource/com/js/areaselect.js", loadLocation);
    }
    function loadLocation(){
        var locObj ;
        $("#areaselect_text").click(function(){
            $("#areaselect_span").show();
            locObj = new locationCard({
                ids: ['province', 'city', 'county']
            });
            locObj.init();
            $("#areaselect_text").hide();
        });
        $("#areaselect_span").hide();
        $("#areaselect_check").click(function(){

            if($("#province").val()!=null){
                area_save($("#province").val(),$("#city").val(),$("#county").val());
                $("#areaselect_span").hide();
                $("#areaselect_text").show();
                locObj.destoryCards();
            }else{
                $.smallBox({
                    title : "操作失败",
                    content : "<i class='fa fa-clock-o'></i> <i> 请选择地区，地区不能为空！</i>",
                    color : "#C46A69",
                    iconSmall : "fa fa-times fa-2x fadeInRight animated",
                    timeout : 6000
                });
                locObj.destoryCards();
            }
        })
        $("#areaselect_cancel").click(function(){

            $("#areaselect_span").hide();
            $("#areaselect_text").show();
            locObj.destoryCards();
        })
    }
    function area_save(p,city,county){
        $("a#areaselect_text").text(p+city+county);
        if(p == "") {
            $("a#areaselect_text").text("请选择地址");
        }else{
            var err = $("a#areaselect_text").parent().find("em");
            if(err) err.remove();
        }
    }

</script>